<template>
  <view class="view-check-list">
    <view class="view-check">
      <Detail :detaiData="detaiData" :subWorkId="subWorkId"></Detail>
      <view class="background-white">
        <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="70vw" labelPosition="top">
          <cu-cell-group>
            <uni-forms-item name="processResult">
              <cu-cell-select
                v-model="formData.processResult"
                :list="listData"
                labelKey="name"
                valueKey="id"
                title="审批结果"
                placeholder="请选择审批结果"
                link
                required
                @confirm="onResultChange"
              ></cu-cell-select>
            </uni-forms-item>
          </cu-cell-group>
          <uni-forms-item style="padding-left: 30rpx; margin-top: 30rpx" name="processSuggestion" label="意见">
            <textarea
              v-model="formData.processSuggestion"
              class="text-area"
              placeholder="请输入"
              placeholder-class="form-placeholder__style"
              maxlength="100"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="submit-group">
      <button class="u-button" type="primary" :ripple="true" @click="submit">提交</button>
    </view>
  </view>
</template>
<script>
import Detail from '../components/detail.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCellSelect from '@/components/cu-cell/cu-cell-select.vue'
import { getWorkDetail, approveWork } from '@/api/dock/trucks'
export default {
  components: {
    Detail,
    CuCellGroup,
    CuCellSelect
  },
  data() {
    return {
      subWorkId: '',
      detaiData: {},
      formData: {
        processResult: '',
        processSuggestion: ''
      },
      listData: [
        {
          id: '1',
          name: '通过'
        },
        {
          id: '2',
          name: '不通过'
        }
      ],
      rules: {
        processResult: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(option) {
    this.subWorkId = option.subWorkId
    this.formData.subWorkId = this.subWorkId
    getWorkDetail(this.subWorkId).then(({ data }) => {
      this.detaiData = data
    })
  },
  methods: {
    onResultChange() {},
    submit() {
      this.$refs.form.validate().then((res) => {
        if (res) {
          if (this.formData.processResult === '2' && !this.formData.processSuggestion) {
            this.$modal.showToast('意见不能为空')
            return
          }
          approveWork({
            subWorkId: this.subWorkId,
            ...this.formData
          }).then(() => {
            this.$modal.showToast('提交成功')
            uni.navigateBack()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-check-list {
  .view-check {
    margin-bottom: 120px;
  }

  .submit-group {
    background: #fff;
    z-index: 9;
    padding: 30px;
  }

  .background-white {
    background-color: #fff;
  }
}
</style>
